<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2023-04-01 19:03:18
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2023-09-25 20:40:53
 * @FilePath: \interview\css样式\旋转小球.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>旋转小球</title>
    <Style>
        .box{
            background: rgb(36, 48, 55);
            /* background: transparent; 背景颜色设为透明 */
            border: 8px solid #00d9ff;
            width: 250px;
            height: 250px;
            margin: 190px auto;
            border-radius: 50%;
            position: relative;
            animation: round 3s infinite;
        }
        .font{
            position: absolute;
            top: 125px;
            left: 116px;
            color: aliceblue;
        }
        @keyframes round{
            0%{
                rotate: 0deg;
            }
            100%{
                rotate: 360deg;
            }
        }
        .box::before{
            position: absolute;
            top: 18px;
            left: 18px;
            content: "";
            width: 30px;
            height: 30px;
            background: rgb(255, 132,0);
            border-radius: 50%;
        }
    </Style>
</head>
<body>
    <div class="box">
        <span class="font">
            
        </span>
    </div>
</body>
</html>